<template>
  <div>
     <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>饼状图</el-breadcrumb-item>
    </el-breadcrumb> 
    <el-card>
      <v-charts style="width:100%;height:450px" :options="options"></v-charts>
    </el-card>
  </div>
</template>

<script>
import Vue from "vue";
// 导入echarts
// pie是饼状图所需的核心文件
import "echarts/lib/chart/pie";
// 显示标题需要的核心文件
import "echarts/lib/component/title";
// 显示legend
import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
// 导入vue-echarts
import Echarts from "vue-echarts";
// 注册全局组件
Vue.component("v-charts", Echarts);
export default {
  data() {
    return {
      options: {
        title: {
          show: true,
          text: "月销售额统计"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: 10,
          top: 40,
          //   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
          data: [],
          show: true
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              // {value: 335, name: '直接访问'},
              // {value: 310, name: '邮件营销'},
              // {value: 234, name: '联盟广告'},
              // {value: 135, name: '视频广告'},
              // {value: 1548, name: '搜索引擎'}
            ]
          }
        ]
      }
    };
  },
  methods: {
    getData() {
      this.$http.get("/index.php?c=charts&a=index").then(({ data }) => {
        //   console.log(data);
        const xData = [];
        const yData = [];
        data.forEach((item, index) => {
          xData.push(`${index + 1}月份`);
          yData.push({ value: item.total, name: `${index + 1}月份` });
        });

        // 错误做法: 此种做法并不能触发界面层的更新
        // this.options.xAxis.data = xData;
        // this.options.series[0].data = yData;
        // 必须给options对象重新赋值, 才能触发页面的刷新
        Object.assign(this.options, {
          legend: { data: xData },
          series: [{ data: yData }]
        });
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style>
</style>